/**
 * React 中组件通信方式
 *
 *    1. 父 -> 子     props
 *    2. 子 -> 父     props 传递一个函数给到子组件
 *    3. 兄弟         状态提升
 *    4. 更复杂的情况下
 *        1. Context 上下文对象
 *        2. 中央事件总线 EventBus
 *            1. mitt
 *            2. pubsub-js
 *        3. 状态管理器
 *            1. redux
 *            2. mobox
 *    5. 其他情况：
 *        1. ref 获取子组件的实例
 */

import { Component, createRef } from "react";
import Hello from "./components/Hello";
import World from "./components/World";
import CountDown from "./components/CountDown";

export default class App extends Component {
  cd = createRef<CountDown>();

  state = {
    show: true,
  };

  handleStart = () => {
    // 获取到 CountDown 组件的实例，然后调用他的方法
    this.cd.current?.start();
  };

  handleStop = () => {
    this.cd.current?.stop();
  };

  render() {
    return (
      <div>
        <h1>App</h1>

        <button onClick={this.handleStart}>开始计时</button>
        <button onClick={this.handleStop}>暂停计时</button>

        <hr />
        <CountDown ref={this.cd} />

        <hr />

        <button
          onClick={() =>
            this.setState((state) => ({
              show: !state.show,
            }))
          }
        >
          Toggle Hello
        </button>

        {this.state.show && <Hello />}

        <World />
      </div>
    );
  }
}
